<template>
	<view class="container">
		<!-- Logo -->
		<view class="logo-wrap">
			<image class="logo" src="/static/min_logo.png" mode="aspectFit"></image>
			<text class="title">碎嘴子乐园</text>
		</view>
		
		<view class="form-box">
			<!-- Logo -->
			<text class="subtitle">{{ isLogin ? '欢迎回来' : '加入我们' }}</text>
			
			<!-- 切换按钮 -->
			<view class="switch-mode">
				<view 
					class="switch-btn" 
					:class="{ active: isLogin }"
					@click="isLogin = true"
				>登录</view>
				<view 
					class="switch-btn" 
					:class="{ active: !isLogin }"
					@click="isLogin = false"
				>注册</view>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-area">
				<!-- 账号输入框 -->
				<view class="input-group" :class="{ 'is-active': activeInput === 'account' }">
					<input 
						type="text" 
						v-model="formData.account" 
						placeholder="请输入账号"
						@focus="activeInput = 'account'"
						@blur="activeInput = ''"
						adjust-position
					/>
					<view class="check-icon" v-if="formData.account">✓</view>
				</view>
				
				<!-- 密码输入框 -->
				<view class="input-group" :class="{ 'is-active': activeInput === 'password' }">
					<input 
						:type="showPassword ? 'text' : 'password'"
						v-model="formData.password" 
						placeholder="请输入密码"
						@focus="activeInput = 'password'"
						@blur="activeInput = ''"
						adjust-position
					/>
					<view class="eye-icon" @click="showPassword = !showPassword">
						{{ showPassword ? '👁' : '👁‍🗨' }}
					</view>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-btn" hover-class="btn-hover" @click="handleSubmit">
				{{ isLogin ? '登录' : '注册' }}
			</view>
			
			<!-- 底部提示 -->
			<view class="bottom-tips" v-if="isLogin">
				<text>还没有账号？</text>
				<text class="link" @click="isLogin = false">立即注册</text>
			</view>
			<view class="bottom-tips" v-else>
				<text>已有账号？</text>
				<text class="link" @click="isLogin = true">立即登录</text>
			</view>
		</view>
		
		<!-- 背景装饰 -->
		<view class="bg-circle bg-circle-1"></view>
		<view class="bg-circle bg-circle-2"></view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { api } from '@/utils/request'

// 是否为登录模式
const isLogin = ref(true)

// 表单数据
const formData = reactive({
	account: '',
	password: ''
})

// 当前激活的输入框
const activeInput = ref('')

// 是否显示密码
const showPassword = ref(false)

// 选择图片
const chooseImage = async () => {
	try {
		const res = await uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera']
		})
		formData.avatar = res.tempFilePaths[0]
	} catch (e) {
		console.error('选择图片失败', e)
	}
}

// 提交处理
const handleSubmit = async () => {
	// 表单验证
	if(!formData.account || !formData.password) {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return
	}
	
	try {
		if (!isLogin.value) {
			// 注册请求
			const response = await api.register({
				account: formData.account,
				password: formData.password
			})

			if(response.code === 200) {
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				
				// 注册成功后自动切换到登录
				isLogin.value = true
			} else {
				uni.showToast({
					title: response.message || '注册失败',
					icon: 'none'
				})
			}
		} else {
			// 登录请求
			const response = await api.login(formData)

			if(response.code === 200) {
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				
				// 存储用户信息
				uni.setStorageSync('userInfo', response.data)
				// 跳到首页 1秒后
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)
			} else {
				uni.showToast({
					title: response.message || '登录失败',
					icon: 'none'
				})
			}
		}
	} catch(error) {
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	padding: 40rpx;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.logo-wrap {
	width: 100%;
	margin: 40rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}
}

.form-box {
	position: relative;
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx 30rpx;
	width: 100%;
	box-sizing: border-box;
	
	.subtitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		display: block;
	}
}

.form-area {
	.input-group {
		position: relative;
		margin-bottom: 20rpx;
		
		input {
			width: 100%;
			height: 70rpx;
			background: #f8f9fa;
			border: 2rpx solid transparent;
			border-radius: 40rpx;
			padding: 0 70rpx 0 30rpx;
			font-size: 26rpx;
			color: #333;
			transition: all 0.3s ease;
			box-sizing: border-box;
			
			&::placeholder {
				color: #999;
			}
		}
		
		&.is-active {
			input {
				border-color: #4facfe;
				background: #ffffff;
				box-shadow: 0 4rpx 12rpx rgba(79, 172, 254, 0.1);
			}
		}
		
		.check-icon {
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #4facfe;
			font-size: 28rpx;
		}
		
		.eye-icon {
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 28rpx;
			color: #999;
			padding: 10rpx; // 增加点击区域
		}
	}
}

.submit-btn {
	background: #4facfe;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	color: #ffffff;
	font-size: 28rpx;
	font-weight: bold;
	border-radius: 40rpx;
	margin-top: 30rpx;
	transition: all 0.3s ease;
	
	&.btn-hover {
		transform: scale(0.98);
		opacity: 0.9;
	}
}

// 背景装饰
.bg-circle {
	position: fixed; // 改为fixed定位
	border-radius: 50%;
	
	&.bg-circle-1 {
		width: 400rpx;
		height: 400rpx;
		background: rgba(255, 255, 255, 0.1);
		top: -200rpx;
		right: -200rpx;
	}
	
	&.bg-circle-2 {
		width: 300rpx;
		height: 300rpx;
		background: rgba(255, 255, 255, 0.05);
		bottom: -150rpx;
		left: -150rpx;
	}
}

// 添加动画
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.form-box {
	animation: fadeInUp 0.6s ease-out;
}

// 适配键盘弹出
@media (max-height: 600px) {
	.form-box {
		margin-top: 30rpx;
		padding: 30rpx 20rpx;
	}
	
	.logo {
		margin-bottom: 30rpx;
		
		.logo-circle {
			width: 50rpx;
			height: 50rpx;
		}
		
		.logo-text {
			font-size: 36rpx;
		}
	}
	
	.input-group {
		margin-bottom: 20rpx;
	}
}

// 添加新样式
.switch-mode {
	display: flex;
	justify-content: center;
	margin-bottom: 30rpx;
	
	.switch-btn {
		padding: 16rpx 40rpx;
		font-size: 28rpx;
		color: #999;
		position: relative;
		transition: all 0.3s ease;
		
		&.active {
			color: #4facfe;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background: #4facfe;
				border-radius: 2rpx;
			}
		}
	}
}

.bottom-tips {
	text-align: center;
	margin-top: 20rpx;
	font-size: 24rpx;
	color: #999;
	
	.link {
		color: #4facfe;
		margin-left: 10rpx;
	}
}

// 表单切换动画
.form-area {
	transition: all 0.3s ease;
}

.input-group {
	animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(20rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
</style> 